<template>
    <div class="flex-start mgt84">
        <div class="flex-start mg53">
            <img src="@/assets/image/home/i1.png" class="is" alt="">
            <div class="">
                <div class="money">{{ screenStore.totalMessage.usedElectricityAmount }}</div>
                <div class="mt">电费(元)</div>
            </div>
        </div>
        <div class="flex-start mg45">
            <img src="@/assets/image/home/i2.png" class="is" alt="">
            <div class="">
                <div class="money">{{ screenStore.totalMessage.usedWaterAmount }}</div>
                <div class="mt">水费(元)</div>
            </div>
        </div>
        <div class="flex-start mg141">
            <img src="@/assets/image/home/i3.png" class="is" alt="">
            <div class="">
                <div class="money">{{ screenStore.totalMessage.usedElectricityNum }}</div>
                <div class="mt">总用电(kwh)</div>
            </div>
        </div>
        <div class="flex-start mg41">
            <img src="@/assets/image/home/i4.png" class="is" alt="">
            <div class="">
                <div class="money">{{ screenStore.totalMessage.usedWaterNum }}</div>
                <div class="mt">总用水(m³)</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
import { useScreenStore } from '../store/index.js'
const screenStore = useScreenStore()

</script>

<style lang='less' scoped>
.is {
    width: 44px;
    height: 44px;
    margin-right: 8px;
    animation: scaleout 3.3s infinite;
}

@keyframes scaleout {
    0% {
        transform: scale(1.0);
        opacity: 1;
    }

    10% {
        transform: scale(1.0);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.3);
        opacity: 1;
    }
}

.money {
    color: #C7E7FF;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.mt {
    color: #22CBFA;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.mg53 {
    margin-left: 53px;
}

.mg45 {
    margin-left: 45px;
}

.mg141 {
    margin-left: 130px;
}

.mg41 {
    margin-left: 41px;
}

.mgt84 {
    margin-top: 75px;
}
</style>
